<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浅色渐变背景自动切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            min-height: 100vh;
            color: #000; /* 文字始终为黑色 */
            transition: background 1.5s ease-in-out; /* 平滑过渡效果 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .container {
            text-align: center;
            max-width: 600px;
            padding: 30px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            font-size: 2.2rem;
            margin-bottom: 15px;
        }
        
        p {
            font-size: 1.1rem;
            margin-bottom: 25px;
            line-height: 1.6;
        }
        
        .info-box {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 15px 20px;
            border-radius: 8px;
            text-align: left;
        }
        
        .info-item {
            margin: 10px 0;
        }
        
        .info-label {
            font-weight: 600;
            display: inline-block;
            width: 120px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>浅色渐变背景自动切换</h1>
        <p>每10秒自动切换一种新的浅色渐变背景，渐变方向随机变化（上下或左上到右下）</p>
        
        <div class="info-box">
            <div class="info-item">
                <span class="info-label">当前渐变:</span>
                <span id="currentGradient">浅蓝色渐变</span>
            </div>
            <div class="info-item">
                <span class="info-label">下次切换:</span>
                <span id="countdown">10</span> 秒
            </div>
            <div class="info-item">
                <span class="info-label">渐变方向:</span>
                <span id="gradientDirection">上下</span>
            </div>
        </div>
    </div>

    <script>
        // 定义一组浅色渐变（每种渐变包含两种相近的浅色调）
        const gradients = [
            { name: "浅蓝渐变", from: "#e0f7fa", to: "#b2ebf2" },
            { name: "浅粉渐变", from: "#fce4ec", to: "#f8bbd0" },
            { name: "浅绿渐变", from: "#e8f5e9", to: "#c8e6c9" },
            { name: "浅紫渐变", from: "#f3e5f5", to: "#e1bee7" },
            { name: "浅黄渐变", from: "#fff8e1", to: "#ffe082" },
            { name: "浅橙渐变", from: "#fff3e0", to: "#ffcc80" },
            { name: "浅灰渐变", from: "#f5f5f5", to: "#eeeeee" },
            { name: "浅青渐变", from: "#e0f2f1", to: "#b2dfdb" }
        ];
        
        // 渐变方向：上下 (to bottom) 或 左上到右下 (to bottom right)
        const directions = ["to bottom", "to bottom right"];
        
        let currentIndex = 0;
        let countdown = 10;
        let countdownInterval;
        let currentDirection;
        
        // 获取DOM元素
        const body = document.body;
        const currentGradientEl = document.getElementById('currentGradient');
        const countdownEl = document.getElementById('countdown');
        const directionEl = document.getElementById('gradientDirection');
        
        // 更新倒计时显示
        function updateCountdown() {
            countdownEl.textContent = countdown;
            if (countdown <= 0) {
                changeGradient();
                resetCountdown();
            } else {
                countdown--;
            }
        }
        
        // 重置倒计时
        function resetCountdown() {
            clearInterval(countdownInterval);
            countdown = 10;
            countdownInterval = setInterval(updateCountdown, 1000);
        }
        
        // 切换到下一个渐变
        function changeGradient() {
            // 计算下一个渐变的索引
            currentIndex = (currentIndex + 1) % gradients.length;
            const nextGradient = gradients[currentIndex];
            
            // 随机选择一个渐变方向
            currentDirection = directions[Math.floor(Math.random() * directions.length)];
            
            // 应用新的渐变背景
            body.style.background = `linear-gradient(${currentDirection}, ${nextGradient.from}, ${nextGradient.to})`;
            
            // 更新显示信息
            currentGradientEl.textContent = nextGradient.name;
            directionEl.textContent = currentDirection === "to bottom" ? "上下" : "左上到右下";
        }
        
        // 初始化
        window.onload = () => {
            // 随机选择初始方向
            currentDirection = directions[Math.floor(Math.random() * directions.length)];
            
            // 设置初始渐变
            const initialGradient = gradients[currentIndex];
            body.style.background = `linear-gradient(${currentDirection}, ${initialGradient.from}, ${initialGradient.to})`;
            
            // 更新初始显示信息
            currentGradientEl.textContent = initialGradient.name;
            directionEl.textContent = currentDirection === "to bottom" ? "上下" : "左上到右下";
            
            // 启动倒计时
            resetCountdown();
        };
    </script>
</body>
</html>
